<template>
    <div class="header-box" >

        <div class="left-box">
<!--            <span>我是标题!!!</span>-->
            <Ud></Ud>
        </div>
        <div class="btn-box">
            <ThemeOption></ThemeOption>
            <i @click="min()" class="fa fa-window-minimize" aria-hidden="true"></i>
            <!--            <i @click = "min()" class="fa fa-minus" aria-hidden="true"></i>-->
            <i v-if="isMaximized" @click="max()" class="fa fa-window-restore" aria-hidden="true"></i>
            <i v-else @click="max()" class="fa fa-window-maximize" aria-hidden="true"></i>
            <!--            <i @click = "close()" class="fa fa-window-close-o" aria-hidden="true"></i>-->
            <i @click="close()" class="fa fa-close" aria-hidden="true"></i>
        </div>
        <el-dialog v-model="closeDialogVisible" :title="'确认关闭'" :width = "300">
            <div class="change-password-box">
                <div>
                    <el-button @click="closeDialogVisible = false">取消</el-button>
                    <el-button type="danger" @click = "closeProgressBtnClick">确定关闭</el-button>
                    <el-button type="primary" @click = "miniTrayBtnClick">最小托盘</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import {reactive, ref} from "vue";



const electron = require('electron');
const ipc = electron.ipcRenderer;
const remote = require("@electron/remote");

const mainWindow = remote.getCurrentWindow();
// console.log(electron.remote)
let isMaximized = ref(false);
let text = ref("搜索内容");
let closeDialogVisible = ref(false);
function min() {
    mainWindow.minimize();
}
mainWindow.on('unmaximize', updateSize);
mainWindow.on('maximize', updateSize);
function updateSize() {
    isMaximized.value = mainWindow.isMaximized();
}
function max() {
    if (mainWindow.isMaximized()) {
        mainWindow.restore();
    } else {
        mainWindow.maximize();
    }
}
function close() {
    closeDialogVisible.value = true;
    // mainWindow.close();
}
function closeProgressBtnClick(){
    ipc.send('closeProgress');
}
function miniTrayBtnClick(){
    closeDialogVisible.value = false;
    setTimeout(()=>{
        ipc.send('miniTray');
    },100);
}
// // 返回 Boolean - 判断窗口是否最大化
// win.isMaximized()
// // 最大化
// win.maximize()
// // 取消窗口最大化
// win.unmaximize()
//
// // 返回 Boolean -判断窗口是否最小化
// win.isMinimized()
// // 最小化
// win.minimize()
// // 将窗口从最小化状态恢复到以前的状态。
// win.restore()
//
// // 返回 Boolean - 判断窗口是否聚焦
// win.isFocused()
// // 聚焦于窗口
// win.focus()
// // 取消窗口的聚焦
// win.blur()

</script>

<style scoped lang="scss">

.theme-red{
    background: #0076F6;
    color: #D9E6FD;
}
.theme-blue{
    background: #C62F2F;
    color: #D9E6FD;
}
.theme-gray{
    background: #515151;
    color: #D9E6FD;
}


.header-box {
    -webkit-app-region: drag;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 47px;
    transition: 0.3s;
    background: var(--theme-background-color);
    color: var(--theme-font-color);
    .left-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .center-box {
        .search-box{
            -webkit-app-region: no-drag;
            position: relative;
            input{
                width: 500px;
                box-sizing: border-box;
                height: 30px;
                vertical-align: top;
                //border-radius: 0;
                border:1px #A8ABB2 solid;
                padding: 4px;
                outline:none;
                background: rgba(255, 255, 255, 0.37);
                border-radius: 3px;
            }
            input:focus{
                border:1px #555 solid;
            }
            i{
                border-radius: 3px;
                height: 30px;
                width: 30px;
                line-height: 30px;
                text-align: center;
                display: inline-block;
                position: absolute;
                right: 0;
                top: 0;
            }
            i:hover {
                background: #A8ABB2;
                color: #FFFFFF;
                transition: 0.3s;
            }
        }
    }

    .btn-box {
        padding-right: 6px;
        -webkit-app-region: no-drag;
        position: relative;
        display: flex;
        i {
            display: inline-block;
            width: 40px;
            //height: 30px;
            height: 35px;
            line-height: 35px;
            font-size: 20px;
            cursor: pointer;
            border-radius: 3px;
            text-align: center;
        }

        i:hover {
            background: rgba(255, 255, 255, 0.2);
            transition: 0.3s;
        }

        i:nth-last-child(1):hover {
            background: #E81123;
        }
    }
}

</style>
